<template>
  <el-scrollbar :max-height="`${props.maxHeight}px`" v-if="props.dataList.length > 0">
    <div v-infinite-scroll="onScrollLoad" :infinite-scroll-distance="10" :infinite-scroll-immediate="false" class="list-module">
      <div v-for="(item, index) in props.dataList" :key="index" class="list-item">
        <div v-if="item.content" class="node-box">
          <span class="cust-spanflex" v-html="js2Obj(item.content)"></span>
          <!-- <span v-html="item.behavior_json.node"></span> -->
          <!-- <span @click="onHandle(item.behavior_json)" class="action-box">{{ item.behavior_json.text }}</span> -->
        </div>
        <div class="time-box">{{ item.behaviour_time }}</div>
      </div>
    </div>
    <div class="tip-box">
      <template v-if="props.isLoading">加载中...</template>
      <template v-else>
        <template v-if="status == 1">暂无数据</template>
        <template v-if="status == 2">滚动加载更多</template>
        <template v-if="status == 3">已全部加载</template>
      </template>
    </div>
  </el-scrollbar>
  <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
  <Video ref="video" />
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, defineExpose, withDefaults, ref, reactive, toRefs, watch } from 'vue'

  // import bus from '@/utils/bus'

  import Video from './Video.vue'

  const emit = defineEmits(['change'])

  interface Props {
    maxHeight?: string
    isLoading: boolean
    sorter: any
    dataList: Array<{
      content:string
      behaviour_time:string
      // behavior_json: { type?: string; node?: string; url?: string | undefined; text?: string }
      // created_at: string
    }>
  }

  const status = ref(1)
  const video = ref()
  const props = withDefaults(defineProps<Props>(), {
    maxHeight: '200',
    isLoading: false,
    sorter: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    },
    dataList: () => []
  })

  const { sorter } = props

  watch(sorter, (depart) => {
    const { pageNum, pageSize, total } = depart
    const curNum = pageSize * pageNum
    if (total == 0) status.value = 1
    if (total > curNum) status.value = 2
    if (total <= curNum) status.value = 3
  })

  const onScrollLoad = (e: any) => {
    if (status.value === 2) emit('change')
  }
  const js2Obj = (obj: any) => {
    return JSON.parse(JSON.stringify(obj))
  }
  const onHandle = (item: { type?: string; node?: string; url?: string | undefined; text?: string }) => {
    const { type, url } = item
    if (type === 'link') window.open(url)
    if (type === 'image') window.open(url)
    if (type === 'video') {
      video.value.videoCheck = true
      video.value.videoUrl = 'https://vod.pipi.cn/43903a81vodtransgzp1251246104/bbd4f07a5285890808066187974/v.f42906.mp4' || url
    }
  }

  // defineExpose({
  //   status
  // })
</script>

<style lang="scss" scoped>
  .list-module {
    padding-right: 20px;

    &::before {
      position: absolute;
      top: 30px;
      bottom: 30px;
      left: 4px;
      height: 100%;
      content: '';
      border-left: 1px dashed #ffc69e;
    }
    .list-item {
      position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 30px;

      &::before {
        position: absolute;
        left: 0;
        content: '';
        width: 9px;
        height: 9px;
        background-color: #fff;
        border: 2px solid #ff6b00;
        border-radius: 50%;
        box-sizing: border-box;
      }

      &::after {
        position: absolute;
        bottom: 0;
        width: calc(100% - 30px);
        content: '';
        border-bottom: 1px dashed #eaeaea;
      }
    }

    .node-box {
      padding: 16px 0;
      line-height: 20px;
      font-size: 14px;
      .action-box {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #33302d;
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .time-box {
      flex: 0 0 auto;
      margin-left: 10px;
      font-size: 14px;
      font-weight: 300;
      color: #969696;
    }
  }

  .tip-box {
    padding: 10px 0 0;
    font-size: 14px;
    font-weight: 300;
    color: #969696;
    text-align: center;
  }
</style>
<style lang="scss">
  // 千万不要加scoped！！！！
  .cust-spanflex{
     display: flex;
     align-items: center;
     flex-wrap: wrap;
  }
  //客户样式
  .cust-attribute{
    font-size: 14px;
    color: #FF6B00;
  }
  //员工样式
  .cunst-staff{
    font-size: 14px;
    color:#0081FF;
  }
  //图片
  .cunst-img{
    width: 24px;
    height: 24px;
    margin: 0px 5px;
  }
  //标题加粗
  .cunst-title{
    font-size: 14px;
    font-weight: 600;
    color: #33302D;
  }
  //标题链接
  .cunst-link{
    font-size: 14px;
    font-weight: 600;
    color: #0081ff;
    .cunst-img{
      width: 24px;
      height: 24px;
      margin: 0px 5px;
    }
  }
  </style>
  